<template>
    <div class="manager-archive-audio__wrapper">
        <div class="top-control__wrapper">
            <div>
                <el-button type="primary" size="mini" @click="onClickPostBtn">发布新稿件</el-button>
                <div>
                    <el-input class="archive-search__input" placeholder="搜索稿件" size="mini"></el-input>
                    <el-button icon="el-icon-search" type="primary" size="mini"></el-button>
                </div>
            </div>
            <div>
                <ul class="atchive-state__wrapper">
                    <!-- 稿件状态 -->
                    <li class="active">
                        <span>全部稿件({{count}})</span>
                    </li>
                    <li>
                        <span>进行中(0)</span>
                    </li>
                    <li>
                        <span>已通过({{count}})</span>
                    </li>
                    <li>
                        <span>未通过(0)</span>
                    </li>
                </ul>
                <div>
                    <el-select
                        size="mini"
                        placeholder="分类筛选"
                        v-model="extendParams.cid"
                        @change="onClassifyChange"
                    >
                        <el-option
                            v-for="(classify,index) in classifyList"
                            :key="index"
                            :label="classify.name"
                            :value="classify.cid"
                        />
                    </el-select>
                    <el-select
                        size="mini"
                        placeholder="排序方式"
                        v-model="extendParams.order"
                        @change="onOrderChange"
                    >
                        <el-option
                            v-for="(order,index) in orderList"
                            :key="index"
                            :label="order.name"
                            :value="order.value"
                        ></el-option>
                    </el-select>
                </div>
            </div>
        </div>
        <el-pagination
            background
            layout="total, ->, sizes, prev, pager, next"
            :total="count"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :current-page="currentPage"
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
            :style="{
                paddingBottom: '15px'
            }"
        ></el-pagination>
        <template v-for="archive in archives">
            <archiveAudioCard :key="archive.aid" :archive="archive" @delete="onArchiveDelete"></archiveAudioCard>
        </template>
        <el-pagination
            background
            layout="sizes, prev, pager, next, ->, total"
            :total="count"
            :page-size="pageSize"
            :page-sizes="pageSizes"
            :current-page="currentPage"
            @size-change="onSizeChange"
            @current-change="onCurrentChange"
        ></el-pagination>
    </div>
</template>

<script>
import {
    archiveAudioListFinderAPI,
    audioClassifyFinderAPI,
} from "@/api/km_archive_audio";
import archiveAudioCard from "./components/archiveAudioCard.vue";

export default {
    components: {
        archiveAudioCard,
    },
    data() {
        return {
            count: 0,
            pageSize: 10,
            pageSizes: [5, 10, 15, 20],
            currentPage: 1,
            archives: [],
            extendParams: {
                order: "senddate",
            },
            classifyList: [],
            orderList: [
                { value: "senddate", name: "按发布时间排序" },
                { value: "hit", name: "按点击量排序" },
            ],
        };
    },
    created() {
        this.extendParams = {
            ...this.extendParams,
            ...this.$route.query,
        };
        this.getArchiveAudioList();
        this.getClassify();
    },
    methods: {
        getClassify() {
            audioClassifyFinderAPI().then((res) => {
                const formatData = res.data.reduce((pv, val) => {
                    pv.push({
                        cid: val.cid.toString(),
                        name: val.name,
                    });
                    return pv;
                }, []);
                formatData.unshift({
                    name: "所有分类",
                });
                this.classifyList = formatData;
            });
        },
        getArchiveAudioList() {
            archiveAudioListFinderAPI(
                {
                    page: this.currentPage,
                    size: this.pageSize,
                },
                this.extendParams
            )
                .then(({ data }) => {
                    this.archives = data.rows;
                    this.count = data.count;
                })
                .catch((err) => {
                    console.log(err);
                    this.$message.error("网络错误");
                });
        },
        onCurrentChange(currentPage) {
            this.currentPage = currentPage;
            this.getArchiveAudioList();
        },
        onSizeChange(pageSize) {
            this.pageSize = pageSize;
            this.getArchiveAudioList();
        },
        onArchiveDelete() {
            if (this.archives.length === 1 && this.currentPage > 1) {
                this.currentPage = this.currentPage - 1;
            }
            this.getArchiveAudioList();
        },
        onClickPostBtn() {
            this.$router.push({
                name: "audioArchiveUploader",
            });
        },
        onClassifyChange(cid) {
            const query = { ...this.$route.query };
            query.cid = cid;
            this.$router.push({ query });
            this.$set(this.extendParams, "cid", cid);
            this.currentPage = 1;
            this.getArchiveAudioList();
        },
        onOrderChange(order) {
            const query = { ...this.$route.query };
            query.order = order;
            this.$router.push({ query });
            this.$set(this.extendParams, "order", order);
            this.currentPage = 1;
            this.getArchiveAudioList();
        },
    },
};
</script>

<style lang="scss">
.manager-archive-audio__wrapper {
    padding: 20px;

    .top-control__wrapper {
        padding: 20px 10px;
        margin-bottom: 20px;
        background-color: #fff;

        > div {
            display: flex;
            justify-content: space-between;

            &:first-child {
                margin-bottom: 10px;
            }
        }

        .archive-search__input {
            width: 301px;
            margin-right: 10px;
        }

        .atchive-state__wrapper {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;

            li {
                padding: 10px 0;
                font-size: 12px;
                cursor: pointer;

                span {
                    padding: 0 15px;
                    border-left: 1px solid #ddd;
                }

                &:first-child span {
                    // padding-left: 0;
                    border: 0;
                }

                &.active {
                    color: $menuActiveText;
                }
            }
        }
    }

    .el-pagination .btn-next,
    .el-pagination .btn-prev,
    li {
        background-color: transparent;
    }

    .el-pagination.is-background .btn-next,
    .el-pagination.is-background .btn-prev,
    .el-pagination.is-background .el-pager li {
        background-color: #fff;
    }
}
</style>